<template>
<div class="conent" id="ddd">
  <div class="foster-more-content">
    <div class="date-wrap">
        <div class="common-sub-title">
          <img src="~assets/img/icon_date.png" alt="培育统计">
          <span @click="openPicker()" ref = "dates">请选择年月</span>
          <mt-datetime-picker
            ref="picker"
            v-model="pickerValue"
            type="date"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="handleConfirm">
          </mt-datetime-picker>
        </div>
        <!-- 等级用户 -->
        <div class="user-level">
          <ul class="tc">
            <li :class="{commonActive:(index == num)}" v-for="(item, index) in userLevel" :key="index"  @click="tabChange(index)">
              <p v-text="item.level"></p>
              <p v-text="item.prize"></p>
            </li>
          </ul>
        </div>
        <!-- 列表 -->
        <div class="common-total-list">
          <div class="list-title tc">
              <span>编号</span>
              <span>姓名</span>
              <span>分级</span>
              <span>日期</span>
              <span>培育奖金</span>
          </div>
          <div class="common-list-item tc">
            <ul>
              <li v-for="(item,index) in cultivations" :key="index">
                <span v-text="item.uid"></span>
                <span v-text="item.name"></span>
                <span v-text="item.level"></span>
                <span v-text="item.create_time"></span>
                <span v-text="item.amount+'元'"></span>
              </li>
            </ul>
          </div>
        </div>
    </div>
  </div>
</div>
</template>

<script>
import { apiPost } from 'src/common/api.js'
export default {
  data () {
    return {
      num: null,
      pickerValue: null,
      levelOneTotal: '11000.00',
      levelTwoTotal: '5000.00',
      levelThreeTotal: '4000.00',
      userLevel: [
        {
          level: '一级奖励',
          prize: '0w'
        },
        {
          level: '二级奖励',
          prize: '000.2w'
        },
        {
          level: '三级奖励',
          prize: '90.23w'
        }
      ],
      cultivations: []
    }
  },
  mounted () {
    this.getMoreInfo()
    setTimeout(() => {
      var sss = document.getElementsByClassName('picker-slot')
      // 将数组变为伪数组
      Array.from(sss)[2].style.display = 'none'
    }, 300)
  },
  methods: {
    openPicker () {
      this.num = null
      let docDom = document.getElementById('app')
      docDom.style.position = 'fixed'
      this.$refs.picker.open()
    },
    handleConfirm () {
      let docDom = document.getElementById('app')
      docDom.style.position = 'static'
      console.log(this.pickerValue)
      if (this.pickerValue !== null) {
        let selectMonth = this.pickerValue.getMonth() + 1
        let selectYear = this.pickerValue.getFullYear()
        this.$refs.dates.innerHTML = selectYear + '年' + selectMonth + '月'
        this.getDateInfo(selectYear, selectMonth)
      }
    },
    // 等级切换，根据等级查询数据
    tabChange (index) {
      this.num = index
      let level = index + 1
      apiPost('user_cultivation_more',
        {
          level: level
        }).then((res) => {
        if (res.status === 0) {
          let data = res.data
          this.cultivations = data.cultivations
          // console.log(data)
        } else {
          console.log(res.msg)
        }
      })
    },
    // 获取更多培育信息
    getMoreInfo () {
      apiPost('user_cultivation_more',
        {}).then((res) => {
        if (res.status === 0) {
          let data = res.data
          this.cultivations = data.cultivations
          this.userLevel[0].prize = data.levelOneTotal
          this.userLevel[1].prize = data.levelTwoTotal
          this.userLevel[2].prize = data.levelThreeTotal
        } else {
          console.log(res.msg)
        }
      })
    },
    // 根据日期查询数据
    getDateInfo (selectYear, selectMonth) {
      apiPost('user_cultivation_more',
        {
          year: selectYear,
          month: selectMonth
        }).then((res) => {
        if (res.status === 0) {
          let data = res.data
          this.cultivations = data.cultivations
        } else {
          console.log(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .date-wrap {
    .common-sub-title {
      padding: 16px;
      background-color: #fff;
    }
    .user-level {
      margin-top: 10px;
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        li {
          flex: 1;
          padding: 16px 0;
          font-size: $font-15;
          color: #777;
          border-bottom: 1px solid #e5e5e5;
          letter-spacing: 2px;
        }
        .commonActive {
          color: $color-font-two;
          border-bottom: 1px solid $color-font-two;
        }
        li:not(:last-child) {
          border-right: 1px solid #d2d2d2;
        }
      }
    }
    .list {
      background-color: #fff;
      margin-top: 10px;
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          flex: 1;
          padding: 16px 0;
          font-size: $font-15;
        }
        li:not(:last-child) {
          border-right: 1px solid #d2d2d2;
        }
      }
    }
  }

</style>
